<template>
  <div class="px-[16px] pt-[16px] bg-[var(--base-color)] rounded-[8px] mt-[8px] pb-[16px]">
    <FormTitle title="报关单信息" />
    <el-form
      ref="formRef"
      label-position="top"
      label-width="100px"
      :model="formData"
      class="form-components"
      :inline="true"
      :rules="rules"
    >
      <el-form-item label="预录编号">
        <el-input v-model="formData.pre_no" :style="inputStyle" disabled />
      </el-form-item>

      <el-form-item label="头程备库单号">
        <div :style="inputStyle">
          <template v-for="(i, idx) in formData.tc_number" :key="i">
            <div v-if="idx < 2">{{ i }}</div>
          </template>
          <el-button
            type="text"
            v-if="formData.tc_number.length > 2"
            @click="tcNumberLogRef?.open({
                data: formData.tc_number,
                title: '头程备库单号',
            })"
            >更多信息</el-button
          >
        </div>
      </el-form-item>

      <!-- <el-form-item label="海关编码">
        <el-input v-model="formData.hs_no" :style="inputStyle" />
      </el-form-item> -->
      <el-form-item label="境内发货人" class="label-red">
        <el-select
          v-model="formData.domestic_consignors"
          placeholder="请选择境内发货人"
          clearable
          :style="inputStyle"
          filterable
          @change="handleChange"
          :disabled="true"
        >
          <el-option
            :label="item.seller_name"
            :value="item.seller_name"
            v-for="item in dict.companyData"
            :key="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="出境关别">
        <el-input
          v-model="formData.exit_barrier"
          :style="inputStyle"
          disabled
        />
      </el-form-item>
      <el-form-item label="出口日期">
        <el-date-picker
          v-model="formData.out_date"
          type="date"
          :style="inputStyle"
          disabled
        />
      </el-form-item>
      <el-form-item label="申报日期">
        <el-date-picker
          v-model="formData.declare_date"
          type="date"
          :style="inputStyle"
          disabled
        />
      </el-form-item>
      <el-form-item label="备案号">
        <el-input
          v-model="formData.record_number"
          :style="inputStyle"
          disabled
        />
      </el-form-item>
      <el-form-item label="境外收货人">
        <el-input
          v-model="formData.offshore_consignee"
          :style="inputStyle"
          disabled
        />
      </el-form-item>
      <el-form-item label="运输方式" class="label-red">
        <el-input v-model="formData.transport_type" :style="inputStyle" />
      </el-form-item>
      <el-form-item label="运输工具及航次号">
        <v-group>
          <el-input
            :value="formData.transport_name + formData.transport_number"
            :style="inputStyle"
            disabled
          />
          <!-- <el-input v-model="formData.transport_name" disabled />
          <el-input v-model="formData.transport_number" disabled /> -->
        </v-group>
      </el-form-item>
      <el-form-item label="提运单号">
        <el-input
          v-model="formData.waybill_number"
          :style="inputStyle"
          disabled
        />
      </el-form-item>
      <el-form-item label="生产销售单位">
        <el-input
          v-model="formData.product_sale_unit"
          :style="inputStyle"
          disabled
        />
      </el-form-item>
      <el-form-item label="监管方式" class="label-red">
        <el-select
          v-model="formData.regulatory_approach"
          placeholder="请选择运输方式"
          clearable
          :style="inputStyle"
          @change="handleChangeRegulatory"
        >
          <el-option
            :label="item.label"
            :value="item.value"
            v-for="item in optionsData?.out_regulatory_approach||[]"
            :key="item.value"
          />
        </el-select>
        <!-- <el-input v-model="formData.regulatory_approach" :style="inputStyle" /> -->
      </el-form-item>
      <el-form-item label="征免性质" class="label-red">
        <el-input v-model="formData.levy_nature" :style="inputStyle" />
      </el-form-item>
      <el-form-item label="许可证号">
        <el-input
          v-model="formData.license_number"
          :style="inputStyle"
          disabled
        />
      </el-form-item>
      <el-form-item label="合同协议号" class="label-red">
        <el-input
          v-model="formData.contract_number"
          placeholder="请输入合同协议号"
          :style="inputStyle"
          @blur="contracNumberBulr"
        />
      </el-form-item>
      <el-form-item label="贸易国(地区)" class="label-red">
        <el-input v-model="formData.departure_country" :style="inputStyle" />
      </el-form-item>
      <el-form-item label="抵运国(地区)" class="label-red">
        <el-input v-model="formData.destination_country" :style="inputStyle" />
      </el-form-item>
      <el-form-item label="指运港" class="label-red">
        <el-input v-model="formData.shipping_port" :style="inputStyle" />
      </el-form-item>
      <el-form-item label="包装种类" class="label-red">
        <el-input v-model="formData.package_type" :style="inputStyle" />
      </el-form-item>
      <el-form-item label="件数">
        <el-input-number
          v-model="formData.total_item_counts"
          :controls="false"
          :style="inputStyle"
          clearable
          disabled
        />
      </el-form-item>
      <el-form-item label="毛重(KG)">
        <el-input-number
          v-model="formData.gross_weight_kg"
          :controls="false"
          clearable
          :style="inputStyle"
          disabled
        />
      </el-form-item>
      <el-form-item label="净重(KG)">
        <el-input-number
          v-model="formData.net_weight_kg"
          :controls="false"
          clearable
          :style="inputStyle"
          disabled
        />
      </el-form-item>
      <el-form-item label="成交方式" class="label-red">
        <el-input v-model="formData.sale_mode" :style="inputStyle" />
      </el-form-item>
      <el-form-item label="运费(CNY)">
        <el-input-number
          v-model="formData.freight_fee_cny"
          :controls="false"
          disabled
          clearable
          :style="inputStyle"
        />
      </el-form-item>
      <el-form-item label="保险(CNY)">
        <el-input-number
          v-model="formData.premiums_fee_cny"
          :controls="false"
          disabled
          clearable
          :style="inputStyle"
        />
      </el-form-item>
      <el-form-item label="杂费(CNY)">
        <el-input-number
          v-model="formData.extras_fee_cny"
          :controls="false"
          disabled
          :style="inputStyle"
          clearable
        />
      </el-form-item>
      <el-form-item label="离境口岸">
        <el-input
          v-model="formData.departure_gate"
          :style="inputStyle"
          disabled
        />
      </el-form-item>

      <el-form-item label="海关编码" class="label-red">
        <el-input v-model="formData.hs_no" :style="inputStyle" />
      </el-form-item>
      <el-form-item label="币种" class="label-red">
        <el-select
          v-model="formData.pre_currency"
          placeholder="请选择"
          :style="inputStyle"
          filterable
          @change="handleChangeCurr"
        >
          <el-option
            :label="item.currency"
            :value="item.currency"
            v-for="item in dict.rateData"
            :key="item.currency"
          />
        </el-select>
        <!-- <el-input v-model="formData.curray" :style="inputStyle" /> -->
      </el-form-item>
      <el-form-item label="汇率" class="label-red">
        <el-input-number
          v-model="formData.pre_exchange_rate"
          :controls="false"
          :disabled="true"
          :style="inputStyle"
        />
      </el-form-item>
    </el-form>
    <tcNumberLog ref="tcNumberLogRef" />
  </div>
</template>

<script setup lang="jsx">
import FormTitle from "@/components/Form/FormTitle.vue";
import { declareCompany } from "@/api/public.js";
import { getRate } from "@/api/index.js";
import tcNumberLog from "../../components/tcNumberLog/index.vue";
import { useEnumSelect } from "@/hooks";
const tcNumberLogRef = ref();
const props = defineProps({
  data: { type: Object, default: () => {} },
});
const emit = defineEmits(["getFormData"]);
const { options: optionsData } = useEnumSelect({
  params: ["out_regulatory_approach "],
});
const dict = reactive({
  companyData: [],
  rateData: [],
});
const formData = reactive({
  id: null,
  pre_no: null,
  tc_number: [],
  hs_no: null,
  domestic_consignors: null,
  exit_barrier: null,
  out_date: null,
  declare_date: null,
  record_number: null,
  offshore_consignee: null,
  transport_type: null,
  transport_name: null,
  transport_number: null,
  waybill_number: null,
  regulatory_approach: null,
  levy_nature: null,
  license_number: null,
  contract_number: null,
  departure_country: null,
  destination_country: null,
  shipping_port: null,
  package_type: null,
  total_item_counts: null,
  gross_weight_kg: null,
  net_weight_kg: null,
  sale_mode: null,
  freight_fee_cny: null,
  premiums_fee_cny: null,
  extras_fee_cny: null,
  departure_gate: null,
  out_declare_company_id: null,
  offshore_consignee: null,
  pre_currency: null,
  pre_exchange_rate: null,
});
const rules = [];
const inputStyle = reactive({
  width: "212px",
});
watch(
  () => props.data,
  (val) => {
    if (val) {
      Object.keys(formData).forEach((key) => {
        formData[key] = val[key];
      });
      contract_number.value = formData.contract_number
    }
  }
);

onMounted(() => {
  getDeclareCompany();
});
const contract_number = ref(null);
const handleChangeRegulatory = (val) => {
  if (val == "CBEC_B2B_OUT") {
    formData.contract_number = null;
  } else {
    formData.contract_number = contract_number.value
  }
  contracNumberBulr()
};
const getDeclareCompany = () => {
  declareCompany().then((res) => {
    dict.companyData = res?.data || [];
  });
};

const getRateList = async () => {
  const { data } = await getRate();
  dict.rateData = data || [];
};
getRateList();
const handleChange = (val) => {
  const item = dict.companyData.find((n) => n.seller_name === val);
  formData.out_declare_company_id = null;
  formData.offshore_consignee = null;
  if (item) {
    formData.out_declare_company_id = item.out_declare_company_id;
    formData.offshore_consignee = item.buy_name;
  }
  getFormData(item);
};
const contracNumberBulr = () => {
  emit("getFormData", formData, null);
};
const getFormData = (val) => {
  emit("getFormData", formData, val);
};
const handleChangeCurr = (val) => {
  let obj = dict.rateData.find((item) => item.currency == val);
  formData.pre_exchange_rate = obj?.exchange_rate || 1;
  emit("getFormData", formData, null);
};
</script>

<style lang="scss" scoped>
.label-red {
  :deep(.el-form-item__label) {
    color: #e50113;
  }
}
</style>
